<!-- 批量删除 -->
<template>
  <button
    type="button"
    class="btn btn-secondary mr-2 button-css button-font"
    :disabled="!isDeleteEnabled"
    @click="bulkDeleteItems"
  >
    <i class="bi bi-trash m-1"></i>批量删除
  </button>
</template>

<script>
import axios from "axios";
import { mapState } from "vuex";

export default {
  name: "BulkDeleteButton",
  computed: {
    ...mapState(["selectedFiles"]),
    isDeleteEnabled() {
      return this.selectedFiles.length > 0;
    },
    // 如果后端只需要ID数组，可以修改此计算属性以直接返回ID数组
    selectedIds() {
      return this.selectedFiles.map((file) => file.id);
    },
    // 保留selectedDetails以便在其他地方可能需要
    selectedDetails() {
      return this.selectedFiles.map((file) => ({
        id: file.id,
        type: file.source,
      }));
    },
  },
  methods: {
    async bulkDeleteItems() {
      if (!this.isDeleteEnabled) return;

      try {
        // 根据后端需求，发送ID数组或包含id和type的对象数组
        const postData = {
          //   array: this.selectedIds, // 如果后端只需要ID数组
          array: this.selectedDetails, // 如果后端需要包含id和type的对象数组
        };

        // 发送批量删除请求到后端
        const response = await axios.post("/api/delete/bulkDelete", postData);

        // 处理成功的响应
        this.$emit("itemsDeleted"); // 通知父组件项已被删除
        this.$store.commit("clearSelectedFiles"); // 清空选中的文件列表，使用commit而不是dispatch
        console.log("项目已批量删除", response);
        // 刷新页面
        setTimeout(function () {
          //1.5秒后执行刷新
          window.location.reload();
        }, 1500); //单位是毫秒
      } catch (error) {
        // 处理错误情况
        console.error("批量删除项目时出错：", error);
        // 在这里可以添加额外的错误处理逻辑，比如显示错误消息
      }
    },
  },
};
</script>

<style scoped>
/* 样式可以在这里定义 */
</style>
